<!--
* @author wn
* @date 2024/01/19 11:14:22
* @description: 订单列表
!-->
<template>
	<!-- 插件 tabs v-tabs -->
	<v-tabs
		:value="tabActive"
		:tabs="orderTabs"
		height="100rpx"
		field="title"
		color="#262626"
		activeColor="#fff"
		bgColor="#fff"
		:scroll="false"
		pills
		pillsColor="#27ba9b"
		line-height="0"
		pillsBorderRadius="20rpx"
		@change="
			(e: number) => {
				tabActive = e
				orderTabs[tabActive].isShow = true
			}
		"
	/>
	<!-- tabs -->
	<view class="tabs">
		<text
			class="item"
			v-for="item in orderTabs"
			:key="item.orderState"
			@tap="tabActive = item.orderState"
		>
			{{ item.title }}
		</text>
		<!-- 游标 -->
		<view class="cursor" :style="{ left: `${tabActive * 20 + 2}%` }"></view>
	</view>
	<!-- 滑动容器 -->
	<swiper
		class="swiper"
		:current="tabActive"
		@change="
			(e: UniHelper.SwiperOnChangeEvent) => {
				tabActive = e.detail.current
				orderTabs[tabActive].isShow = true
			}
		"
	>
		<swiper-item v-for="item in orderTabs" :key="item.orderState">
			<!-- 订单列表 -->
			<order-card v-if="item.isShow" :orderState="item.orderState" />
		</swiper-item>
	</swiper>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import OrderCard from './components/OrderCard.vue'

// tabs 数据
const orderTabs = reactive([
	{ orderState: 0, title: '全部', isShow: true },
	{ orderState: 1, title: '待付款', isShow: false },
	{ orderState: 2, title: '待发货', isShow: false },
	{ orderState: 3, title: '待收货', isShow: false },
	{ orderState: 4, title: '待评价', isShow: false },
])
// tabs 选中 index
const tabActive = ref(0)
</script>
<style lang="scss">
page {
	display: flex;
	flex-direction: column;
	.swiper {
		flex: 1;
	}
}
// tabs
.tabs {
	display: flex;
	line-height: 100rpx;
	background-color: #fff;
	box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
	border-top: 1rpx dashed #262626;
	.item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
		color: #262626;
	}

	.cursor {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 16%;
		height: 6rpx;
		background-color: $primary-color;
		/* 过渡效果 */
		transition: all 0.4s;
	}
}
</style>
